<template>
    <div class="container davatar">
      <div class="tips-title">1.基本用法<span class="tips-explain">支持三种类型：图标、图片和字</span></div>
      <el-row>
        <el-col :span="8">
          <el-avatar icon="el-icon-user-solid"></el-avatar>
        </el-col>
        <el-col :span="8">
          <el-avatar :src="circleUrl"></el-avatar>
        </el-col>
        <el-col :span="8">
          <el-avatar> user </el-avatar>
        </el-col>
      </el-row>
      <div class="tips-title">2.不同类型<span class="tips-explain">size="(number)/large/medium/small" shape="(null,默认circle)/square"</span></div>
      <el-row>
        <el-col :span="8">
          <div class="tips-title-sub">circle</div>
          <div class="demo-basic--circle">
            <div class="block" v-for="size in sizeList" :key="size">
              <el-avatar :size="size" :src="circleUrl"></el-avatar>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="tips-title-sub">square</div>
          <div class="demo-basic--square">
            <div class="block" v-for="size in sizeList" :key="size">
              <el-avatar shape="square" :size="size" :src="squareUrl"></el-avatar>
            </div>
          </div>
        </el-col>
      </el-row>
      <div class="tips-title">3.图片加载失败的 fallback 行为</div>
      <el-avatar :size="60" src="https://empty" @error="errorHandler">
        <img src="../../../assets/images/demo/pic-load-error.png"/>
      </el-avatar>
      <div class="tips-title">4.图片如何适应容器框</div>
      <div class="demo-fit">
        <div class="block" v-for="fit in fits" :key="fit">
          <div class="tips-title-sub">{{ fit }}</div>
          <el-avatar shape="square" :size="100" :fit="fit" :src="url"></el-avatar>
        </div>
      </div>
    </div>
</template>
<script>
  export default {
    name: 'd-avatar',
    data() {
      return {
        circleUrl: "../../../../static/images/user1-test-pic.png",
        squareUrl: "../../../../static/images/user2-test-pic.png",
        sizeList: ["large", "medium", "small"],

        fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
        url: '../../../../static/images/avatar-test-pic.jpeg'
      }
    },
    methods: {
      errorHandler() {
        return true
      }
    }
  }
</script>
<style>
  .davatar .demo-basic--circle, .davatar .demo-basic--square , .davatar .demo-fit{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .demo-basic--circle .block, .demo-basic--square .block , .demo-fit .block{
    flex: 1;
  }
</style>

